{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}
<style>
    .metadata-table {
        font-size: 2.2rem !important;
    }

    .metadata-table th {
        font-size: 2.2rem !important;
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .metadata-table td {
        font-size: 2.2rem !important;
    }
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
        font-size: 1.3rem;
    }
    .table td {
        font-size: 1.2rem;
    }
    .actions {
        display: flex;
        gap: 5px;
        align-items: center;
    }
    .actions form {
        margin: 0;
        padding: 0;
        display: inline;
    }
    .table-container {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 0;
    }
    
    .table {
        table-layout: fixed;
        width: 100%;
    }
    .card {
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .table-container { width: 100%; overflow-x: auto; }
    .table th:nth-child(1), .table td:nth-child(1) { width: 3%; }
    .table th:nth-child(2), .table td:nth-child(2) { width: 20%; }
    .table th:nth-child(3), .table td:nth-child(3) { width: 30%; }
    .table th:nth-child(4), .table td:nth-child(4) { width: 15%; text-align: right; }
    .table th:nth-child(5), .table td:nth-child(5) { width: 10%; text-align: right; }
    .table th:nth-child(6), .table td:nth-child(6) { width: 5%; text-align: right; }

    /* Menyesuaikan lebar kolom tabel metadata */
    .metadata-table th:nth-child(1), .metadata-table td:nth-child(1) { width: 20%; } /* Ref. No */
    .metadata-table th:nth-child(2), .metadata-table td:nth-child(2) { width: 50%; } /* Date */
    .metadata-table th:nth-child(3), .metadata-table td:nth-child(3) { width: 15%; } /* Currency */
    .metadata-table th:nth-child(4), .metadata-table td:nth-child(4) { width: 15%; } /* Rate */
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Journal Entry</h2>
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#addEntryModal">
        Add New Entry
    </button>
</div>

<div class="table-container">
    <table class="table table-bordered table-striped metadata-table" style="border-collapse: collapse; width: 100%;">
        <thead class="table-dark">
            <tr>
                <th scope="col">Ref. No</th>
                <th scope="col">Date</th>
                <th scope="col">Currency</th>
                <th scope="col">Rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ ref_no }}</td>
                <td>{{ date }}</td>
                <td>{{ currsign }}</td>
                <td>{{ rate|format_rupiah }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-container">
    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Account No</th>
                <th scope="col">Description</th>
                <th scope="col">IDR Amount</th>
                <th scope="col">USD Amount</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if journals %}
            {% for journal in journals %}
            <tr>
                <td>{{ forloop.counter }}</td> <td>{{ journal.acct_no|format_acct_no }}</td>
                <td>{{ journal.descript }}</td>
                <td class="text-end">{{ journal.idramt|format_rupiah }}</td>
                <td class="text-end">{{ journal.usdamt|format_usd }}</td>
                <td class="d-inline-flex gap-2">
                    <a href="#" class="btn btn-sm btn-secondary"><i class="bi bi-pencil"></i></a>
                    <a href="#" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="6" class="text-center">No journal entries found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
    $(document).ready(function() {
        $('#idramt').mask('#.##0', {reverse: true});
        $('#usdamt').mask('#,##0.00', {reverse: true});

        // Apply the same mask for the modal form
        $('#idramt_modal').mask('#.##0', {reverse: true});  
        $('#usdamt_modal').mask('#,##0.00', {reverse: true});
    });
</script>

{% endblock %}